<template>
    <div>
        <!-- visible.sync  v-model  自定义组件上能够使用v-model -->
        <el-dialog :title="form.id ? '角色编辑' : '角色添加'" :visible.sync="buffer.formBuffer" @opened="open">
            <el-form :model="form">
                {{ form }}
                <!-- 角色名称 -->
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="form.rolename" autocomplete="off"></el-input>
                </el-form-item>

                <!-- 角色权限 -->
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree ref="tree" :data="menuList" show-checkbox node-key="id" :props="defaultProps">
                    </el-tree>
                </el-form-item>

                <!-- 角色状态 -->
                <el-form-item label="角色状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="buffer.formBuffer = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ['buffer', 'menuList'],
    data() {
        return {
            form: {
                rolename: "",//角色名称   string 
                menus: "",   //角色权限   id字符串'2,3,4' 字符串 
                status: 1  //状态       1正常2禁用    number
            },
            formLabelWidth: '120px',
            defaultProps: {
                children: 'children',
                label: 'title'
            }
        };
    },
    watch: {
        buffer: {
            handler(newV, oldV) {
                if (newV.formBuffer == false) {
                    // 表单赋空
                    this.form = {
                        rolename: "",//角色名称   string 
                        menus: "",   //角色权限   id字符串'2,3,4' 字符串 
                        status: 1  //状态       
                    }
                    // tree组件赋空
                    this.$refs.tree.setCheckedKeys([])
                }
            },
            deep: true,//使用深度监听
        }
    },
    methods: {
        open() {
            let keyArray = this.form.menus.split(',') //[1,2,3,4,5]
            // console.log(this.menuList, keyArray)
            // 循环删除一级权限数据id，通过二级孩子权限id 反推父亲选中的状态
            this.menuList.forEach(item => {
                keyArray.forEach((m, i) => {
                    if (item.id == m && item.children) {
                        keyArray.splice(i, 1)
                    }
                })
            })
            // console.log(keyArray)
            this.$refs.tree.setCheckedKeys(keyArray)//"1,2,3,4"
        },
        submit() {

            // [1,4,6,8]  

            // 1.获取权限节点数据
            let nodes = this.$refs.tree.getCheckedNodes(false, true)
            this.form.menus = nodes.map(item => item.id).join(',');//[1,4,6,8]==>"1,4,6,8"
            // console.log(nodes); return;
            (this.form.id ? this.$api.reqEditRole(this.form) : this.$api.reqAddRole(this.form))
                .then(res => {
                    // 3.1关闭弹窗
                    this.buffer.formBuffer = false
                    // 3.2提示用户操作成功
                    this.$message({ type: "success", message: "操作成功！" })
                    // 3.3赋空表单数据(使用了watch)
                    // 3.4更新数据列表
                    this.$emit('channel', '更新数据吧！')
                })
                .catch(err => console.log(err))
        },
        // 监听下拉选择变化
        changePid(pid) {
            // pid == 0 ? this.form.type = 1 : this.form.type = 2
            if (pid == 0) {
                this.form.type = 1
                this.form.url = ""
            } else {
                this.form.type = 2
                this.form.icon = ""
            }
        }
    },
    mounted() {
        // console.log(this)
        // 监听list组件数据传递消息 执行编辑数据回填功能
        this.$BUS.$on('edit', (info) => {
            // this指向问题：
            // this.$BUS.$on('edit', function (info) {
            console.log(info)
            // console.log('this:', this)//箭头函数规范：外出作用域（定义不是运行）

            let { index, row } = info
            this.form = JSON.parse(JSON.stringify(row))
            this.buffer.formBuffer = true

            // 点击编辑弹起表单窗口的时候tree组件没有加载完毕 所以以下实例获取是undefined
            // 解决方案：
            // 1.延时获取
            // this.$nextTick(() => {
            // let keyArray = this.form.menus.split(',')
            //     // console.log(this.$refs.tree)
            //     this.$refs.tree.setCheckedKeys(keyArray)//"1,2,3,4"
            // })
            // 2.监听el-dialog彻底加载完毕事件

        })
    }
};
</script>

<style scoped>

</style>
